<template>
  <div class="avatar-container">
    <el-popover
      placement="top-start"
      title=""
      width="30"
      trigger="hover"
      content=""
    >
      <template>
        <div
          class="user-info-container"
          style="
            display: flex;
            justify-content: center;
            flex-direction: column;
            justify-content: center;
          "
        >
          <div style="text-align: center; margin-bottom: 10px">
            {{ userInfo.name }}
          </div>

          <el-button size="mini" @click="logout"> 退出</el-button>
        </div>
      </template>
      <div slot="reference" class="avatar">
        <img src="../assets/image/avatar.jpg" />
      </div>
    </el-popover>
  </div>
</template>

<script>
import { GetCurrentUse } from "@/api/Authentication";
import { Popover, Button } from "element-ui";

export default {
  components: {
    [Popover.name]: Popover,
    [Button.name]: Button,
  },
  data() {
    return {
      userInfo: {},
    };
  },
  methods: {
    init() {
      GetCurrentUse().then((resule) => {
        this.userInfo = resule.data;
      });
    },
    logout() {
      localStorage.clear();
      this.$router.push({ path: "/" });
    },
  },
  created() {
    this.init();
  },
};
</script>

<style>
.avatar-container {
  /* width: 40px; */
  height: 40px;
}
.avatar {
  width: 40px; /* 或者你想要的头像大小 */
  height: 40px; /* 与宽度相同 */
  border-radius: 50%; /* 使得div变成圆形 */
  overflow: hidden; /* 确保图片不会溢出div范围 */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.el-popover {
  min-width: 80px !important;
}
.avatar img {
  width: 100%; /* 让图片填充整个div */
  height: auto; /* 保持图片的宽高比 */
}
</style>
